import React, { useState } from 'react'
import { Link } from 'react-router-dom'


import {
    Image,
    Form,
    Input,
    Button,
    Mask
} from 'antd-mobile'

import { UserOutline, LockFill } from 'antd-mobile-icons'

import "./login.less"



import { log_api } from "../../apis/logreg"


export default function Login() {
    let [acc, setAcc] = useState("");
    let [pwd, setPwd] = useState("");


    //防抖节流：防止多次点击，节约流量
    let [newAcc, setNewAcc] = useState("");
    let [newPwd, setNewPwd] = useState("");


    //蒙层
    const [visible, setVisible] = useState(false)
    const WithContent = () => {
        return (
            <>
                <Mask visible={visible} onMaskClick={() => setVisible(false)}>
                    <div className="overlayContent">
                        <h3>X</h3>
                        <p>账号或密码错误</p>
                    </div>
                </Mask>
            </>
        )
    }
    let submit = async () => {
        if (newAcc != acc || newPwd != pwd) {
            //发送请求
            let res = await log_api({ acc, pwd });
            //console.log(res.data);
            let { code, msg } = res.data;
            if (code == 1) {
                window.location.hash = "/layout"
            } else {
                setVisible(true);
                setTimeout(() => {
                    setVisible(false);
                }, 1000);
            }
        }
        setNewAcc(acc);
        setNewPwd(pwd);
    }

    return (
        <div className="login">
            <Image src={require("../../assets/imgs/logo.jpg").default} />
            <Form
                layout='horizontal'
                footer={
                    <Button onClick={submit} block type='submit'>
                        登录
                    </Button>
                }
            >
                <Form.Item>
                    <UserOutline fontSize={38} color='#ff2f66' />
                    <Input onChange={(value) => { setAcc(value) }} value={acc} name="姓名" rules={[{ required: true, message: '用户名不能为空' }]} placeholder='请输入用户名' clearable />
                </Form.Item>
                <Form.Item>
                    <LockFill fontSize={38} color='#ff2f66' />
                    <Input onChange={(value) => { setPwd(value) }} value={pwd} placeholder='请输入密码' clearable type='password' />
                </Form.Item>
            </Form>
            <div>
                <WithContent />
            </div>

            <div className="jump-page">
                <Link to="/register">前往注册</Link>
                <Link to="/register">忘记密码</Link>
            </div>
            <div className="agree-deal">登录注册表示同意网站协议</div>
        </div >

    )
}
